<template>
  <!-- 成就勋章页面 -->
  <div class="app-container">
    <!-- 搜索工具栏 -->
    <section>
      <so-tool-bar :toolData="toolData" :query="listQuery" @search="search" />
    </section>
    <!-- 其他操作 -->
    <section class="filter-container">
      <el-row>
        <el-col :span="5">
          <el-button type="primary" size="small" plain @click="effect(0)">停用</el-button>
          <el-button type="primary" size="small" @click="effect(1)">继续使用</el-button>
        </el-col>
        <el-col :span="19">
          <el-upload 
            style="float: right;margin-left: 10px;" 
            action="/api/medalrank/export"
            name="export_file" 
            :before-upload="beforeUpload" 
            :on-success='handleHaveSuccess'
            :show-file-list="false"
            >
            <el-button type="primary" size="small">勋章导入</el-button>
          </el-upload>
          <el-button type="primary" size="small" @click="createForm" style="float: right">新增勋章</el-button>
        </el-col>
      </el-row>
    </section>
    <!-- 表格数据 -->
    <el-table :data="tableList" v-loading="loading" element-loading-text="正在查询中。。。" stripe highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column align="center" prop="medalrank_name" label="勋章名称">
      </el-table-column>
      <el-table-column align="center" label="级别" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{conf.rank[scope.row.rank - 1]}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="medal_name" label="分组名称" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" prop="gain_nums" label="已获得（人次）">
      </el-table-column>
      <el-table-column align="center" label="状态">
        <template slot-scope="scope">
          <el-tag size="mini" :type="scope.row.close_status?'success':'danger'">{{close_status[scope.row.close_status].label}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="create_time" label="发布时间">
      </el-table-column>
      <el-table-column align="center" label="操作" width="100">
        <template slot-scope="scope">
          <i class="iconfont ali-edit-2" @click="editForm(scope.row)"></i>
          <!-- &nbsp;
          <i class="iconfont ali-bin" @click="delRow(scope.row)"></i> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <section>
      <so-pagination :query="listQuery" @initList="initList" />
    </section>
    <!-- 添加 编辑 -->
    <section>
      <createTemp ref="childTemp" :isShow="isShow" @closeTemp="isShow = false" @initParentList="initList"></createTemp>
    </section>
  </div>
</template>
<script>
import { medalrank_list, medalrank_updateCloseStatus, medalrank_delete } from '@/api/medalrank'
import { searchTool } from '@/utils'
import config from '@/utils/conf'
import createTemp from './components/create'
import SoPagination from '@/components/SoPagination'
import SoToolBar from "@/components/SoToolBar";
import medal, { close_status } from "./medal";

export default {
  name: "medal",
  components: { createTemp, SoPagination, SoToolBar },
  data() {
    return {
      toolData: [], //工具栏初始化
      loading: false,
      tableList: [],
      conf: config,
      multipleSelection: [],
      listQuery: { start: 0, limit: 10, total: 0, current: 1 },
      close_status: close_status,
      isShow: false,
    };
  },
  methods: {
    beforeUpload(file){//导入
      this.loading = true;
      let name = file.name.split('.');
      if (name[name.length - 1] === 'xls' || name[name.length - 1] === 'xlsx') {
        return file
      } else {
        this.$message.error('文件只能是 xls/xlsx 格式!')
        return false
      }
    },
    handleHaveSuccess(res, file, fileList) {
      this.loading = false;
      if (res.status == 100) {
        this.$message.success("导入成功");
        this.initList();
      }else{
        this.$message.warning("上传异常");
      }
    },
    async createForm(){
      this.isShow = true;
      this.$refs.childTemp.clearForm();
      this.$store.dispatch("SetDecide",'add')
    },
    async editForm(e) {
      this.isShow = true;
      this.$store.dispatch("SetDecide",'edit')
      this.editData = e;
      this.$refs.childTemp.editForm(e);
    },
    async delRow(row) {
      try {
        let res = await this.$confirm('确认删除吗？')
        if (res == 'confirm') {
          this.loading = true;
          let { data } = await medalrank_delete(row);
          this.loading = false;
          if (data.status == 100) {
            this.$message.success('删除成功')
            this.initList();
          }
        }
      } catch (error) {
        console.log(error, 'error')
      }
    },
    async effect(e) {//1 生效 0 取消
      if (this.multipleSelection.length == 0) {
        this.$message.warning('请先选择需要调整单元');
        return;
      }
      const ids = this.multipleSelection.map(item => item.id).join();
      this.loading = true;
      let { data } = await medalrank_updateCloseStatus({ ids: ids, close_status: e });
      this.loading = false;
      if (data.status === 100) {
        await this.initList();
        this.$message.success('操作成功');
      }
    },
    search() {//搜索
      this.listQuery = searchTool(this.listQuery);
      this.initList();
    },
    handleSelectionChange(e) {//
      this.multipleSelection = e;
    },
    async initToolData() {
      this.toolData = await medal.getToolData();
    },
    async initList() {
      this.loading = true
      const query = {...this.listQuery, company_id: localStorage.getItem('companyId') - 0};
      const { data } = await medalrank_list(query);
      this.loading = false
      if (data.status == 100) {
        this.tableList = data.data.rows.map(item => {
          return {...item, switch: !!item.close_status }
        })
        this.listQuery.total = data.data.results;
      }
    }
  },
  created() {
    this.initList()
    this.initToolData();
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.ali-edit-2 {
  cursor: pointer;
  color: #e6a23d;
}

.ali-bin {
  cursor: pointer;
  color: #f56c6c;
}
</style>


